<template>
	<view class="page">
	<public-module></public-module>
	<!--view :style="'background-image: url('+shopinfo.cover+');'" class="image-bg"></view-->
	<view class="imagebox ">
		<view :style="'background-image: url('+shopinfo.cover+');'" class="image-bg"></view>
		
		<view class="u-flex-y u-flex-middle u-m-t-50">
			<u--image :src="shopinfo.shopqrcode" width="120px" height="120px" radius="10"></u--image>
			<u-gap height="20"></u-gap>
			<button v-if="hasLogin==true" type="primary" size="mini" @click="$Router.push({path: '/pages/componentsC/shop/postershop', query: {id: shopinfo.shop_id}})">生成海报</button>
		</view>
		
	</view>
	<view class="u-content">

		<view class="title">{{shopinfo.name}}</view>
		<view>{{shopinfo.address}}</view>
		<view>商店ID:{{shopinfo.shop_id}}</view>
		<u-parse :content="content"></u-parse>
	</view>
	
	
      <u-empty text="暂无销售记录"  mode="data"  :show="flow_list.length === 0"  v-if="loadstatus == false" ></u-empty>
      <view class="" v-if="flow_list.length > 0">
	  
	<view class=" u-padding-20 u-type-warning-dark u-font-34">购买记录</view>
		<view class="base-panel-box">
			<view class="item" v-for="(item, index) in flow_list" :key="index">
			<u-row gutter="0" justify="space-between">
				<u-col span="12" text-align="left">
					<view><text class="u-type-success-dark">{{item.userinfo.nickname}}</text> <text class="u-type-error-dark u-p-l-10 u-p-r-10">购买</text> {{ orderGoodsName(item.order_detailed) }}</view>
				</u-col>
			</u-row>
			</view>
		</view>

	  
        <view v-if="flow_list.length > 0">
          <u-loadmore :status="loadStatus" @loadmore="getflowlist"></u-loadmore>
        </view>
      </view>
    </view>

</template>

<script>
	import { mapState, mapMutations } from "vuex";
export default {
	data() {
		return {
			content:'',
			shopinfo:[],
			loadstatus:false,
			loadStatus: "loadmore",
			flow_list:[],
			page: 1,
			shop_id:'',
			hasLogin:false
		};
	},
	computed: {
		...mapState(["user"]),
		orderGoodsName() {
				return (order_detailed) => {
					let arr = []
					order_detailed.forEach(order_detailed => arr.push(order_detailed.product_name + '*' + order_detailed.num))
					return arr.join('，')
				}
			}
		},
		
  onLoad(options) {
	let query = JSON.parse(decodeURIComponent(options.query));
    this.shop_id = query.id;
	this.hasLogin=this.$store.getters.loginFlag;
	//uni.setNavigationBarTitle({title});
    this.articleview();
	this.getflowlist()
	},
  onReachBottom() {
    this.loadStatus = "loading";
    setTimeout(() => {
      this.getflowlist();
      this.loadStatus = "loadmore";
    }, 50);
  },
	methods: {
		articleview(){
			this.loadstatus=true;
                    this.$api('archives.shop_view', {
						shop_id:this.shop_id
					}).then(res => {
						console.log(res)
						if (res.code==200){
							this.shopinfo=res.data;
							this.content=res.data.content
						}
                    }).catch((e)=>{});
		},
		getflowlist(){
                    this.$api('order.order_list', {
						shop_id:this.shop_id,
						page: this.page,
						limit: 10,
					}).then(res => {
						if (res.code == 200) {
						  if (res.data.count > 0) {
							let list = res.data.list;
							if (this.page <= res.data.pages) {
							  for (let i = 0; i < list.length; i++) {
								this.flow_list.push(list[i]);
							  }
							  if (this.page == res.data.pages) {
								this.loadStatus = "nomore";
							  }
							  this.page += 1;
							} else {
							  this.loadStatus = "nomore";
							}
						  } else {
							this.flow_list = [];
							this.loadStatus = "nomore";
						  }
						}
						this.loadstatus=false;
                    }).catch((e)=>{});
		}
	},
};
</script>

<style lang="scss" scoped>
    .u-content{
		padding: 20rpx 20rpx 20rpx 20rpx;
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		// 标签形式无效
		p {
			color: $u-tips-color;
		}
	}
.imagebox{
	position: absolute;
	top:0;
	left:0;
	height: 450rpx;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.image-bg {
    position: absolute;
    left: -5%;
    bottom: 0;
	top:-40rpx;
    right: 0;
	filter:blur(8px);
}
.qrcode{
	margin:40rpx auto 20rpx auto;
	display: inline-block;
}
.title{
	font-size: 36rpx;
	font-weight: bold;
}
</style>
